<template>
  <div class="box">
    <el-card class="card">
      <el-form>
        <el-form-item>
          <el-col :span="8">
            <div class="search">
              <label>
                商品名称:
              </label>
              <el-input v-model="title" clearable placeholder="请输入商品名称" style="width: calc(100% - 100px)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="search">
              <label>
                分类商品:
              </label>
              <el-select v-model="value" clearable style="width: calc(100% - 100px)" placeholder="请选择分类商品">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>

            </div>
          </el-col>
          <el-col :span="8">
            <div class="search">
              <label>
                是否上架:
              </label>
              <div class="radio">
                <el-radio-group v-model="isopen" style="display: flex">
                  <div>
                    <el-radio :label="1">开</el-radio>
                  </div>
                  <div>
                    <el-radio :label="2">关</el-radio>
                  </div>
                </el-radio-group>
              </div>
            </div>
          </el-col>

        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-col :span="12">-->
        <!--            <div class="search">-->
        <!--              <label>-->
        <!--                价格范围min:-->
        <!--              </label>-->
        <!--              <el-input clearable placeholder="下单人信息昵称/手机号" style="width: calc(100% - 150px)" />-->
        <!--            </div>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <div class="search">-->
        <!--              <label>-->
        <!--                价格范围max:-->
        <!--              </label>-->
        <!--              <el-input clearable placeholder="洗车工信息昵称/手机号" style="width: calc(100% - 150px)" />-->
        <!--            </div>-->
        <!--          </el-col>-->

        <!--        </el-form-item>-->
        <!--        <el-form-item>-->
        <!--          <el-col :span="12">-->
        <!--            <div class="search">-->
        <!--              <label>-->
        <!--                库存范围min:-->
        <!--              </label>-->
        <!--              <el-input clearable placeholder="联系人姓名/手机号" style="width: calc(100% - 100px)" />-->
        <!--            </div>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <div class="search">-->
        <!--              <label>-->
        <!--                库存范围max:-->
        <!--              </label>-->
        <!--              <el-input clearable placeholder="联系人姓名/手机号" style="width: calc(100% - 100px)" />-->
        <!--            </div>-->
        <!--          </el-col>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item>-->
        <!--          <el-col :span="12">-->
        <!--            <div class="search">-->
        <!--              <label>时间范围min:</label>-->
        <!--              <el-date-picker-->
        <!--                v-model="createArr"-->
        <!--                style="width: calc(100% - 100px)"-->
        <!--                type="daterange"-->
        <!--                range-separator="至"-->
        <!--                start-placeholder="开始日期"-->
        <!--                end-placeholder="结束日期"-->
        <!--              />-->
        <!--            </div>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <div class="search">-->
        <!--              <label>时间范围max:</label>-->
        <!--              <el-date-picker-->
        <!--                v-model="payArr"-->
        <!--                style="width: calc(100% - 100px)"-->
        <!--                type="daterange"-->
        <!--                range-separator="至"-->
        <!--                start-placeholder="开始日期"-->
        <!--                end-placeholder="结束日期"-->
        <!--              />-->
        <!--            </div>-->
        <!--          </el-col>-->
        <!--        </el-form-item>-->

        <div class="form_export">
          <el-button style="margin-left: 110px" type="primary" @click="onSearch()">搜索</el-button>
        </div>
      </el-form>
    </el-card>
    <el-card>
      <div class="title">
        总数: {{ total }}
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          align="center"
          label="ID">
          <template slot-scope="scope">
            <div class="tDiv"><span>{{ scope.row.id }}</span></div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="分类商品">
          <template slot-scope="scope">
            <div class="tDiv">
              <div class="tDiv">
                <p>{{ scope.row.categoryName }} </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="商品名称/图片">
          <template slot-scope="scope">
            <div class="tDiv">
              <div class="tDiv">
                <el-avatar shape="square" :size="50" :src=" IMG_URL + scope.row.imgurl"/>
                <p>{{ scope.row.title }} </p>
                <p>{{ scope.row.secondtitle }} </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <!--    /    <el-table-column-->
        <!--          align="center"-->
        <!--          label="商品图片"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="tDiv">-->
        <!--              <div class="tDiv">-->
        <!--                <el-avatar shape="square" :size="50" :src="scope.row.washeravatar" />-->
        <!--                <p>{{ scope.row.washername }} </p>-->
        <!--                <p>会员ID:{{ scope.row.washermobile }}</p>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          label="价格"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="tDiv">-->
        <!--              <p v-if="scope.row.cartype2 == '1'">轿车</p>-->
        <!--              <p v-else-if="scope.row.cartype2 == '2'">SUV</p>-->
        <!--              <p v-else-if="scope.row.cartype2 == '3'">MVP</p>-->
        <!--              <p>{{ scope.row.carnum }} </p>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          align="center"
          label="库存">
          <template slot-scope="scope">
            <div class="tDiv">
              <p>{{ scope.row.stock }} </p>
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          align="center"-->
        <!--          label="服务地址"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <div class="tDiv">-->
        <!--              <p>{{ scope.row.province }} </p>-->
        <!--              <p>{{ scope.row.city }}</p>-->
        <!--              <p>{{ scope.row.area }}</p>-->
        <!--              <p>{{ scope.row.address }}</p>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          align="center"
          label="原格/现价">
          <template slot-scope="scope">
            <div class="tDiv">
              <p>原价:{{ scope.row.originalprice }} </p>
              <p>现价:{{ scope.row.presentprice }} </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间">
          <template slot-scope="scope">
            <div class="tDiv">
              <p>{{parseTime(scope.row.createtime, '{yyyy}-{mm}-{dd} {hh}:{ii}:{ss}')}} </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="是否上架">
          <template slot-scope="scope">
            <div class="tDiv">
              <el-button
                type="success"
                v-if="scope.row.isopen == 1"
                @click="isOpenclose(scope.row.id,scope.row.isopen)">是</el-button>
              <el-button
                type="info"
                v-if="scope.row.isopen == 2"
                @click="isOpenclose(scope.row.id,scope.row.isopen)"
              >否</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="updateStockDiolog(scope.row.id,scope.row.stock)">库存</el-button>
              <span>|</span>
              <el-button type="text" @click="editJump(scope.row.id)">编辑</el-button>
              <span>|</span>
              <el-button type="text" @click="goodsDel(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="bottom">
        <!--        <el-button type="primary" @click="jumpAdd()" >新增项目</el-button>-->
        <el-pagination
          background
          :current-page="pageNum"
          :page-sizes="[3, 5, 10, 10000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

<!--      修改库存对话框-->
      <el-dialog title="修改库存" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="库存">
            <el-input v-model="stock" autocomplete="off" style="width: calc(100% - 100px)"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateStock">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import { goodsDel, isOpenclose, listGoods, updateStock } from '../../api/goods'
  import { CateDelete, getOpenclose, goodsCategoryList } from '../../api/cate'
  import { parseTime } from '../../utils'
  import { IMG_URL } from '../../utils/global'

  export default {
    name: 'GoodsList',
    data() {
      return {
        labelPosition: 'right',
        pageSize: 10,
        pageNum: 1,
        total: 0,
        options: [],

        tableData: [],
        title: '',
        value: '',
        isopen: '',
        IMG_URL: IMG_URL,
        stock: 0, // 库存
        goodsid: '', // 商品id
        dialogFormVisible: false,
      }
    },
    created() {
      this.listGoods()
      this.goodsCategoryList()
    },
    methods: {

      // 是否开启分类商品
      isOpenclose(id, isopen) {
        console.log(4444, isopen)
        const data = {
          id: id,
          // eslint-disable-next-line eqeqeq
          isopen: isopen == '1' ? '2' : '1'
        }
        isOpenclose(data).then((res) => {
          console.log('是否开启分类商品', res)
          this.listGoods()
        })
      },
      // 商品列表
      listGoods() {
        const data = {
          pageNum: 1,
          pageSize: 10
        }
        // eslint-disable-next-line eqeqeq
        if (this.title != '') {
          data.title = this.title
        }
        if (this.value != '') {
          data.categoryid = this.value
        }
        if (this.isopen != '') {
          data.isopen = this.isopen
        }
        listGoods(data).then(res => {
          if (res.code == 0) {
            console.log('商品列表==', res)
            const tempArr = []
            res.data.list.forEach(item => {
              tempArr.push(item) // 把第一行数据给数组
              tempArr.push(item) // 把第二行数据给数组
            })
            this.tableData = tempArr
            this.tableData = res.data.list
            this.total = res.data.total
            // this.stock = res.data.stock
          }
        })
      },

      // 获取分类商品列表
      goodsCategoryList() {
        const data = {
          pageNum: 1,
          pageSize: 10,
          name: ''
        }
        console.log(data)
        goodsCategoryList(data).then(res => {
          console.log('获取分类商品列表', res.data)
          if (res.code === 0) {
            this.options = res.data.list
          }
        })
      },

      // 修改库存对话框
      updateStockDiolog(id,total){
        this.goodsid = id
        this.stock = total
        this.dialogFormVisible = true
      },

      // 修改商品库存
      updateStock(id,stock) {
        const data = {
          goodsid: this.goodsid,
          stock:  this.stock
        }
        updateStock(data).then(res => {
          if (res.code == 0 ) {
            console.log('修改商品库存成功', res)
            this.dialogFormVisible = false
            this.$message.success('操作成功')
            this.listGoods()
          }
        })
      },

      // 删除商品
      goodsDel(id) {
        this.$confirm('此操作将永久删除该分类商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {
            id: id
          }
          goodsDel(data).then(res => {
            console.log(res)
            // eslint-disable-next-line eqeqeq
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.listGoods()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      // 编辑跳转
      editJump(id) {
        this.$router.push({
          path: '/goods/add',
          query: {
            idEdit: id,
            back: 1
          }
        })
      },

      // 跨列
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          // 偶数行
          if (columnIndex === 0) {
            // 第一列
            return {
              rowspan: 1,
              colspan: 9
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        } else {
          // console.log(rowIndex);
          // console.log(this.tableData);
          // console.log(this.tableData.length);
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      },

      // 时间转换器
      parseTime(time, formmat) {
        // eslint-disable-next-line no-undef
        return parseTime(time, formmat)
      },

      // 分页器
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.listGoods()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.listGoods()
        console.log(`当前页: ${val}`)
      }
    }
  }
</script>

<style scoped lang="less">
  .box {
    padding: 20px;

    .card {
      margin-bottom: 20px;
    }

    /*form表单但中的盒子*/

    .search {
      display: flex;
      justify-content: start;

      label {
        width: 100px;
        text-align: right;
        margin-right: 15px;
      }
    }

    /*列表的盒子*/

    .tDiv {

      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        margin-top: 3px;
      }

      img {
        width: 60px;
        height: 60px;
      }
    }

    /*列表上面的一行*/

    .oneDiv {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        margin: auto 5px;

      }
    }

    /*total*/

    .title {
      margin: 10px 10px 30px 10px;
      padding: 10px 15px;
      background: #5f8ffe;
      color: white;
      border-radius: 10px;
    }

    /*分页器样式*/

    .bottom {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .form_export {
      text-align: center;

      .el-button {
        margin: auto 30px;
      }
    }

    .radio {
      display: flex;
      justify-content: center;
      align-items: center;

    }

  }
</style>
